<template>
	<view class="content">
		<view class="content_bg">
			<image src="https://admin.gonghe.group/static/img/2.png" class="img_bg" mode="aspectFill"></image>
		</view>

		<!-- 查询 -->
		<view class="query_box">

			<view class="query_content">
				<!-- 搜索 -->
				<view class="search_box">
					<view class="select">
						郑州
					</view>

					<u--input placeholder="搜索民宿/地点/关键词" v-model="select" fontSize="36rpx" border="none"></u--input>

					<view class="positioning_icon">
					</view>
				</view>
				<!-- 日期 -->
				<view class="search_date_box">
					<view class="date">
						<text><text class="outh">4月25日</text>入住</text>
						<text>—</text>
						<text class=""><text class="outh">4月26日</text>离店</text>
					</view>

					<text class="time">共一晚</text>
				</view>

				<view class="search_btn" @click="handleSearchHomestay()">
					<text>查询民宿</text>
				</view>

				<view class="search_tab">
					<view class="tab_item">
						<view class="item_icon"></view>
						<text>线上开发票</text>
					</view>
					<view class="tab_item">
						<view class="item_icon service"></view>
						<text>24小时管家服务</text>
					</view>
					<view class="tab_item">
						<view class="item_icon attestation"></view>
						<text>房源真实认证</text>
					</view>
				</view>

				<view class="banner">
					<view class="banner_item" v-for="item in queryBannerList" @click="queryBannerClick(item)">
						<image style="width: 76rpx; height: 76rpx; margin-bottom: 20rpx; background-size: 76rpx;"
							:src="item.url"></image>
						<text>{{ item.title }}</text>
					</view>

				</view>
			</view>

		</view>

		<!-- 更多内容 -->
		<view class="content_more_box">

			<view class="menu_box">
				<text>快捷菜单</text>
				<view class="banner_box">
					<image style="width: 216rpx; height: 142rpx; margin-top: 26rpx;" :src="item.url"
						@click="bannerClick(item)" v-for="item in bannerList"></image>
				</view>

			</view>


			<!-- 好房 -->
			<view class="good_house_box">

				<view class="menu_title">
					<view class="left">
						<text class="up">超赞好房 欢喜入住</text>
						<text class="down">花少钱 住好房</text>
					</view>

					<view class="right" @click="goHomestayList"></view>
				</view>


				<view class="good_house_content">
					<view class="good_house_item" v-for="item in goodHouseList">
						<image :src="item.url" class="img"></image>
						<view class="up">
							<view class="left">
								<image :src="item.avatar" class="avatar" style="z-index: 999;"></image>
								<text style="color: #000000;">郑州房东</text>
							</view>

							<text style="color: #A6A6A6;">公寓 · 1室1床2人</text>
						</view>
						<view class="info">
							<text>超级大床房可做饭/原木风格主 题/私人影院</text>
						</view>

						<view class="down">
							<view class="left">
								<u-icon name="map-fill" color="#000" size="19"></u-icon>
								<text style="margin-left: 10rpx; font-size: 18rpx; color: #000000;">2.1km</text>
							</view>

							<view class="right">
								<text
									style="font-size: 18rpx; color: #A6A6A6; text-decoration: line-through;">￥319</text>
								<text style="font-size: 24rpx; color: #FF3600; margin-left: 22rpx;">￥245</text>
							</view>
						</view>

					</view>

				</view>


			</view>



			<!-- 外卖 -->
			<view class="takeaway_box">
				<view class="menu_title">
					<view class="left">
						<text class="up">低价外卖 无忧上楼</text>
						<text class="down">送到手上</text>
					</view>

					<view class="right"></view>
				</view>

				<view class="takeaway_content">

					<!-- 店铺 -->
					<view class="shop_item" v-for="item in 3">
						<!--  店铺详情 -->
						<view class="shop_info">
							<view class="lift">
								<image src="@/static/img/banner3.png" class="avatar"></image>

								<view class="right">
									<text class="shop_name">就是拧 手打柠檬茶</text>

									<view class="down">
										<view class="item">
											<text>月售</text>
											<text style="color: #000000;">500+</text>
										</view>

										<view class="item">
											<text>起送</text>
											<text style="color: #000000;">￥20</text>
										</view>

										<view class="item">
											<text>距离</text>
											<text style="color: #000000;">2.1km</text>
										</view>

									</view>
								</view>
							</view>

							<view class="into_shop" @click="handleGoShopDetail()">
								<text style="margin-right: 14rpx;">进店</text>
								<u-icon name="arrow-right" color="#A6A6A6" size="17"></u-icon>

							</view>
						</view>

						<!-- 商品列表 -->
						<view class="goods_list">

							<scroll-view class="scroll-view_H" scroll-x="true">

								<view class="goods_item" v-for="item in 6">
									<view class="item_content">
										<image src="https://admin.gonghe.group/static/img/banner5.png" mode=""
											class="goods_img"></image>
										<text
											style="font-size: 18rpx; color: #000000; margin-top: 10rpx; padding-left: 3rpx;">泰式柠檬茶</text>
										<view class="goods_price">
											<text class="price">￥28</text>
											<text class="del_price">￥32</text>
										</view>
									</view>
								</view>



							</scroll-view>

						</view>


					</view>

				</view>

			</view>



		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryBannerList: [{
						url: "../../static/img/banner7.png",
						click: "隐私安全",
						title: "隐私安全"
					},
					{
						url: "../../static/img/banner8.png",
						click: "实名保障",
						title: "实名保障"
					},
					{
						url: "../../static/img/banner9.png",
						click: "入住礼遇",
						title: "入住礼遇"
					},
					{
						url: "../../static/img/banner10.png",
						click: "邻里社交",
						title: "邻里社交"
					}
				],
				bannerList: [{
						url: "https://admin.gonghe.group/static/img/banner1.png",
						click: "checkIn"
					},
					{
						url: "https://admin.gonghe.group/static/img/banner2.png",
						click: "takeaway"
					},
					{
						url: "../../static/img/banner3.png",
						click: "socialize"
					},
					{
						url: "https://admin.gonghe.group/static/img/banner4.png",
						click: "housekeep"
					},
					{
						url: "https://admin.gonghe.group/static/img/banner5.png",
						click: "Attractions"
					},
					{
						url: "https://admin.gonghe.group/static/img/banner6.png",
						click: "Parcel Housing"
					}
				],
				select: "",
				goodHouseList: [{
						url: "https://admin.gonghe.group/static/img/banner4.png",
						avatar: "../../static/img/banner3.png"
					},
					{
						url: "https://admin.gonghe.group/static/img/banner6.png",
						avatar: "../../static/img/banner1.png"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			queryBannerClick(item) {
				this.$u.toast(item.click)
			},
			bannerClick(item) {
				console.log('item>>>>',item)
				switch (item.click) {
					case 'checkIn':
						// 入住
						break;
					case 'takeaway':
						// 外卖
						uni.switchTab({
							url: '/pages/takeaway/index'
						})
						break;
					case 'socialize':
						// 房友社交
						uni.switchTab({
							url: '/pages/socialize/index'
						})
						break;
					case 'housekeep':
						// 管家
						break;
					case 'Attractions':
						// 周边景点
						
						uni.showToast({
							title: '暂未开放',
							icon: 'none'
						})
						break;
					case 'Parcel Housing':
						// 拼房
						uni.showToast({
							title: '暂未开放',
							icon: 'none'
						})
						break;
						
				}
				// this.$u.toast(item.click)
			},
			goHomestayList() {
				uni.navigateTo({
					url: "/pages/homestay_list/homestay_list"
				})
			},
			// 点击跳转店铺详情
			handleGoShopDetail() {
				uni.navigateTo({
					url: '/pages/takeaway/shop_info'
				})
			},
			// 点击查询搜索民宿
			handleSearchHomestay() {
				console.log('aaa')
				uni.navigateTo({
					url: '/pages/homestay/list/index'
				})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 377rpx;

		.content_bg {
			position: fixed;
			left: 0;
			top: 0;
			z-index: -100;
			right: 0;
			height: 520px;

			.img_bg {
				height: 100%;
				width: 100%;
				// position: absolute;
				// left: 50%;
				// transform: translateX(-27%);

			}
		}

		// 查询 
		.query_box {
			padding: 0 30rpx;

			.query_content {
				padding: 40rpx 30rpx;
				border-radius: 20px;
				background-color: #fff;

				.search_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000;

					.select {
						margin-right: 50rpx;
					}


					.positioning_icon {
						width: 38rpx;
						height: 38rpx;
						margin-left: 85rpx;
						background: url(@/static/img/positioning.png) no-repeat;
						background-size: 38rpx;
					}
				}

				//  日期 
				.search_date_box {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-top: 60rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #A6A6A6;

					.date {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						flex: 1;
						margin-right: 70rpx;
					}

					.time {
						width: 90rpx;
						// margin-left: 66rpx;
					}

					.outh {
						font-size: 36rpx;
						color: #000000;
					}
				}

				.search_btn {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 85rpx;
					margin-top: 50rpx;
					color: #FFFFFF;
					font-size: 36rpx;
					background: linear-gradient(90deg, #0054F6 0%, #2782FF 54%, #0054F6 100%);
					border-radius: 20rpx;
				}

				.search_tab {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;
					padding: 0 14rpx;
					font-size: 22rpx;
					color: #A6A6A6;

					.tab_item {
						display: flex;
						align-items: center;

						.item_icon {
							display: flex;
							align-items: center;
							width: 21rpx;
							height: 21rpx;
							margin-right: 10rpx;
							background-image: url(@/static/img/invoice.png);
							background-size: 21rpx;
						}

						.service {
							background-image: url(@/static/img/service.png);
						}

						.attestation {
							background-image: url(@/static/img/attestation.png);
						}
					}

				}

				.banner {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 30rpx;
					padding: 0 33rpx;
					font-size: 22rpx;
					color: #000000;

					.banner_item {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;


					}


				}


			}
		}

		// 更多
		.content_more_box {
			margin-top: 40rpx;
			padding: 30rpx 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			// 快捷菜单
			.menu_box {
				margin-bottom: 10rpx;
				font-size: 30rpx;
				color: #000000;

				.banner_box {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 10rpx;
				}

			}


			// 好房
			.good_house_box {
				margin-top: 50rpx;

				.good_house_content {
					display: flex;
					justify-content: space-between;
					margin-top: 35rpx;

					.good_house_item {
						position: relative;
						width: 335rpx;
						padding: 133rpx 20rpx 20rpx;
						border-radius: 20rpx 20rpx 0 0;
						box-sizing: border-box;

						.img {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 156rpx;
							background-color: #7C8FA3;
							border-radius: 20rpx 20rpx 0 0;
						}

						.up {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							font-size: 18rpx;

							.left {
								display: flex;
								align-items: flex-end;

								.avatar {
									width: 46rpx;
									height: 46rpx;
									margin-right: 5rpx;
									background-color: #A6A6A6;
									border-radius: 50%;
								}
							}
						}

						.info {
							margin-top: 20rpx;
							font-size: 22rpx;
							line-height: 28rpx;
							color: #000000;
							text-align: justify;
						}

						.down {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							margin-top: 28rpx;

							.left {
								display: flex;
								align-items: center;
							}

							.right {
								display: flex;
								align-items: flex-end;
							}
						}
					}

				}


			}

			// 外卖
			.takeaway_box {
				margin-top: 65rpx;

				.takeaway_content {
					width: 100%;
					margin-top: 32rpx;

					// 店铺 
					.shop_item {
						margin-bottom: 30rpx;
						padding: 20rpx 0 38rpx 20rpx;
						overflow: hidden;

						// 店铺详情
						.shop_info {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							padding-right: 20rpx;

							.lift {
								display: flex;
								align-items: flex-start;

								.avatar {
									width: 98rpx;
									height: 98rpx;
									border-radius: 20rpx;
									background-color: yellow;
								}

								.right {
									display: flex;
									flex-direction: column;
									height: 98rpx;
									margin-left: 15rpx;
									padding: 4rpx 0 7rpx;
									box-sizing: border-box;

									.shop_name {
										font-size: 28rpx;
										font-weight: bold;
										color: #000000;

									}

									.down {
										display: flex;
										margin-top: 11rpx;
										padding-left: 2rpx;

										.item {
											display: flex;
											flex-direction: column;
											margin-right: 40rpx;
											font-size: 22rpx;
											color: #A6A6A6;
										}
									}

								}
							}

							.into_shop {
								display: flex;
								align-items: center;
								padding-top: 4rpx;
								font-size: 24rpx;
								font-size: #A6A6A6;
							}


						}

						// 商品列表
						.goods_list {

							margin-top: 28rpx;
							padding-left: 134rpx;

							.scroll-view_H {
								white-space: nowrap;
								width: 100%;

								.goods_item {
									display: inline-block;

									.item_content {
										display: flex;
										flex-direction: column;
										width: 136rpx;
										margin-right: 15rpx;

										.goods_img {
											width: 100%;
											height: 129rpx;
											border-radius: 15rpx;
											background-color: yellow;
										}

										.goods_price {
											display: flex;
											justify-content: space-between;
											align-items: flex-end;
											margin-top: 14rpx;
											padding: 0 12rpx 0 7rpx;

											.price {
												font-size: 20rpx;
												font-weight: 400;
												color: #FF0000;
											}

											.del_price {
												font-size: 16rpx;
												color: #A6A6A6;
												text-decoration: line-through;
											}
										}

									}

								}

							}

						}
					}

				}

			}


			// 菜单标题
			.menu_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 20rpx;

				.left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 30rpx;
					font-weight: 500;
					color: #000000;

					.down {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #A6A6A6;
					}
				}

				.right {
					width: 100rpx;
					height: 40rpx;
					background: url(@/static/img/more.png) no-repeat;
					background-size: 100rpx;
				}

			}

		}


	}
</style>